<template>
	<div class="tabs">
        <div class="tabs-list">
            <a-tabs v-model="tabActive" @change="handleTab">
                <a-tab-pane v-for="item in tabList" :key="item.value"  :name="item.value">
                    <template #title>
                        <i :class="['EachApp', item.icon]"/>
                        {{ item.label }}
                    </template>
                </a-tab-pane>
            </a-tabs> 
        </div>
        <!-- 隐藏时出现的更多按钮 -->
        <ComPopover :btnList="tabList" @handleBtn="handleTab($event.value)" :hideAfter="0"/>
	</div>
</template>
<script lang="ts" setup>
const props = defineProps({
    tabList:{ type: Array, default: () => { return [] }}
})
const emit = defineEmits(['handleTab']);
const tabActive = ref(props.tabList.length ? props.tabList[0].value : '' );

// 切换tabs
const handleTab = (e) => {
    emit('handleTab', e);
}
</script>